const ECHARTS = "echarts";
import BaseCharts from "./BaseCharts";
export default (OptionsFormat, componentName) => {
  return {
    name: componentName,
    ECHARTS,
    components: {
      BaseCharts
    },
    props: {
      type: {
        type: String,
        required: false,
        default: undefined
      },
      data: {
        type: Object | Array,
        required: true
      },
      options: {
        type: Object,
        default: () => {
          return {};
        }
      }
    },
    data() {
      return {
        fromData: {},
        fromOptions: {},
        toBaseChartsData: {}
      };
    },
    watch: {
      data: {
        deep: true,
        immediate: true,
        handler(val) {
          console.log(val);
          this.fromData = val;
          this.setOptions();
        }
      },
      options: {
        deep: true,
        immediate: true,
        handler(val) {
          console.log(val);
          this.fromOptions = val;
          this.setOptions();
        }
      }
    },
    methods: {
      setOptions() {
        this.toBaseChartsData = new OptionsFormat(this).options;
      }
    },
    render(h) {
      return h(
        "div",
        {
          style: { width: "100%", height: "100%" }
        },
        [
          h(BaseCharts, {
            style: { width: "100%", height: "100%" },
            props: { ...this.$attrs, baseChartsData: this.toBaseChartsData }
          })
        ]
      );
    }
  };
};
